<template>
  <div>
    <div class="head-box heightbox" v-show="headIndex == 1">
      <el-image :src="titleText" class="head-image" />
    </div>

    <div class="head-box heightFirst" v-show="headIndex == 2">
      <el-image :src="titleText" class="head-image" />
    </div>

    <div class="head-two" v-show="headIndex == 3">
      <el-image class="head-twoimage" :src="titleText" />
      <div class="head-list flexItem">
        <div class="head-item">
          <div
            v-for="(item, index) in dataList"
            :key="index"
            @click="choseItem(item, index)"
            :class="{ itemBox: choseIndex == index }"
            class="headIem"
          >
            {{ item.name }}
          </div>
        </div>

        <div class="avatar flexItem">
          <div v-if="!showUser">
            <el-avatar :size="48" :src="circleUrl" class="avatarImage" />
          </div>
          <div v-if="showUser" class="isUserInfo" @click="goLogin">登录/注册</div>
          <span class="hotLine">咨询热线：400-000-0000</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, defineProps, defineEmits } from "vue";
import { useStore } from "vuex";
import { useRouter } from 'vue-router';
import titleText from "@/assets/titleText.png";

const props = defineProps({
  // 默认高度是72px，页面头部是108px
  height: {
    type: Number,
    default: null || 72,
  },
  // 默认选择第一个头部标签
  headIndex: {
    type: Number,
    default: null || 1,
  },
   // 默认选择第一个选择项
   choseIndex: {
    type: Number,
    default: null || 0,
  },
});

const emit = defineEmits(["choseIndex"]);
const store = useStore();
const router = useRouter();
const stateFrom = store.state;
const dataList = ref([
  { name: "首页" },
  { name: "人才市场" },
  { name: "发布需求" },
  { name: "案例" },
]);
const circleUrl = ref(
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
);
const showUser = ref(true);
onMounted(() => {
  getUserInfo();
});
// 去登录页面
const goLogin=()=>{
    router.push('/login');
}
const choseItem = (item, index) => {
  emit("choseIndex", index);
};
const getUserInfo = () => {
  if (stateFrom.token) {
    showUser.value = false;
  } else {
    showUser.value = true;
  }
  // console.log(stateFrom.token,'4448458');
};
</script>
<style lang="scss" scoped>
.head-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.heightbox {
  height: 72px;
}
.heightFirst {
  height: 108px;
}
.head-two {
  height: 85px;
  display: flex;
  // align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  padding-top: 23px;
}
.head-list {
  position: absolute;
  top: 67px;
  width: 1200px;
  height: 72px;
  background: #ffffff;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
  border-radius: 16px 16px 16px 16px;
  padding: 0 24px;
  z-index: 1;
}
.avatar {
  //   width: 250px;
}
.avatarImage {
	margin-right: 16px;
  width: 48px;
  height: 48px;
}
.flexItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.head-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 750px;

  > div {
    width: 120px;
    text-align: center;
    cursor: pointer;
  }
}
.hotLine {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #fc4c00;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.headIem {
  width: 120px;
  height: 48px;
  line-height: 48px;
  border-radius: 12px 12px 12px 12px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
}
.itemBox {
  color: #fff;
  background: #165dff;
  text-align: left;
  font-style: normal;
  text-transform: none;
  position: relative;
  &:before {
    content: "";
    width: 0;
    height: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #165dff; /* 这里的颜色是三角形的颜色 */
    position: absolute;
    top: 100%;
    left: 55px;
    bottom: 0;
    animation-name: example;
    animation-duration: 0.4s;
  }
}
.head-image {
  width: 170px;
  height: 25px;
}
.head-twoimage {
  width: 170px;
  height: 25px;
}
.isUserInfo {
  margin-right: 16px;
  width: 118px;
  height: 48px;
  background: #fc8800;
  text-align: center;
  line-height: 48px;
  border-radius: 12px 12px 12px 12px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
}
</style>
